import React, { useState } from "react";

interface CombinedAIButtonProps {
    onOpenAIChat: () => void;
    onOpenVoiceAssistant: () => void;
}

const CombinedAIButton: React.FC<CombinedAIButtonProps> = ({
    onOpenAIChat,
    onOpenVoiceAssistant,
}) => {
    const [showOptions, setShowOptions] = useState(false);
    const [isRotating, setIsRotating] = useState(false);

    const handleMainButtonClick = () => {
        setIsRotating(true);
        setShowOptions(!showOptions);
        setTimeout(() => setIsRotating(false), 300);
    };

    const handleOptionClick = (action: () => void) => {
        setShowOptions(false);
        action();
    };

    return (
        <>
            {/* 主按钮 */}
            <button
                onClick={handleMainButtonClick}
                style={{
                    position: "fixed",
                    bottom: "80px",
                    left: "50%",
                    transform: "translateX(-50%)",
                    width: "80px",
                    height: "80px",
                    borderRadius: "50%",
                    background:
                        "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
                    border: "none",
                    cursor: "pointer",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    boxShadow: "0 8px 32px rgba(102, 126, 234, 0.4)",
                    transition: "all 0.3s ease",
                    zIndex: 100,
                    animation: isRotating ? "rotate 0.3s ease-in-out" : "none",
                }}
                onMouseEnter={(e) => {
                    e.currentTarget.style.transform =
                        "translateX(-50%) scale(1.1)";
                    e.currentTarget.style.boxShadow =
                        "0 12px 40px rgba(102, 126, 234, 0.6)";
                }}
                onMouseLeave={(e) => {
                    e.currentTarget.style.transform =
                        "translateX(-50%) scale(1)";
                    e.currentTarget.style.boxShadow =
                        "0 8px 32px rgba(102, 126, 234, 0.4)";
                }}
            >
                <span
                    role="img"
                    aria-label="AI助手"
                    style={{
                        fontSize: "32px",
                        color: "#fff",
                        filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
                    }}
                >
                    🤖
                </span>
            </button>

            {/* 选项按钮 */}
            {showOptions && (
                <>
                    {/* AI聊天选项 */}
                    <button
                        onClick={() => handleOptionClick(onOpenAIChat)}
                        style={{
                            position: "fixed",
                            bottom: "180px",
                            left: "50%",
                            transform: "translateX(-50%)",
                            width: "60px",
                            height: "60px",
                            borderRadius: "50%",
                            background:
                                "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
                            border: "none",
                            cursor: "pointer",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                            boxShadow: "0 6px 24px rgba(102, 126, 234, 0.4)",
                            transition: "all 0.3s ease",
                            zIndex: 99,
                            animation: "slideDown 0.3s ease-out",
                        }}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.transform =
                                "translateX(-50%) scale(1.1)";
                            e.currentTarget.style.boxShadow =
                                "0 8px 32px rgba(102, 126, 234, 0.6)";
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.transform =
                                "translateX(-50%) scale(1)";
                            e.currentTarget.style.boxShadow =
                                "0 6px 24px rgba(102, 126, 234, 0.4)";
                        }}
                    >
                        <span
                            role="img"
                            aria-label="AI聊天"
                            style={{
                                fontSize: "24px",
                                color: "#fff",
                            }}
                        >
                            💬
                        </span>
                    </button>

                    {/* 昆昆语音助手选项 */}
                    <button
                        onClick={() => handleOptionClick(onOpenVoiceAssistant)}
                        style={{
                            position: "fixed",
                            bottom: "260px",
                            left: "50%",
                            transform: "translateX(-50%)",
                            width: "60px",
                            height: "60px",
                            borderRadius: "50%",
                            background:
                                "linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%)",
                            border: "none",
                            cursor: "pointer",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                            boxShadow: "0 6px 24px rgba(255, 107, 107, 0.4)",
                            transition: "all 0.3s ease",
                            zIndex: 99,
                            animation: "slideDown 0.3s ease-out 0.1s both",
                        }}
                        onMouseEnter={(e) => {
                            e.currentTarget.style.transform =
                                "translateX(-50%) scale(1.1)";
                            e.currentTarget.style.boxShadow =
                                "0 8px 32px rgba(255, 107, 107, 0.6)";
                        }}
                        onMouseLeave={(e) => {
                            e.currentTarget.style.transform =
                                "translateX(-50%) scale(1)";
                            e.currentTarget.style.boxShadow =
                                "0 6px 24px rgba(255, 107, 107, 0.4)";
                        }}
                    >
                        <span
                            role="img"
                            aria-label="昆昆语音助手"
                            style={{
                                fontSize: "24px",
                                color: "#fff",
                            }}
                        >
                            🎤
                        </span>
                    </button>

                    {/* 背景遮罩 */}
                    <div
                        onClick={() => setShowOptions(false)}
                        style={{
                            position: "fixed",
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            backgroundColor: "rgba(0,0,0,0.3)",
                            zIndex: 98,
                            animation: "fadeIn 0.3s ease-out",
                        }}
                    />
                </>
            )}

            <style>{`
                @keyframes rotate {
                    0% { transform: translateX(-50%) rotate(0deg); }
                    100% { transform: translateX(-50%) rotate(180deg); }
                }
                
                @keyframes slideDown {
                    0% { 
                        transform: translateX(-50%) translateY(-20px);
                        opacity: 0;
                    }
                    100% { 
                        transform: translateX(-50%) translateY(0);
                        opacity: 1;
                    }
                }
                
                @keyframes fadeIn {
                    0% { opacity: 0; }
                    100% { opacity: 1; }
                }
            `}</style>
        </>
    );
};

export default CombinedAIButton;
